<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #container {
            width: 300px;
            height: 200px;
            border: 1px solid black;
            padding: 20px;
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #input {
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="container">
        <input type="text" id="input" placeholder="输入内容"><br>
        内容为：<span id="text"></span>
    </div> 

    <script>
        // 方式一：
        // var obj = {};
        // // 监听opj数据的改变，值为prop，get（）获得数据;set（val）设置数据
        // Object.defineProperty(obj, 'prop', {
        //     get: function () {
        //         return val;
        //     },
        //     set: function (newVal) {
        //         val = newVal;
        //         document.getElementById('text').innerHTML = val;
        //     }
        // });
        // document.addEventListener('keyup', function (e) {
        //     obj.prop = e.target.value;
        // });

        // 方式二：
        let obj = {
            name: ''
        }
        let newObj = JSON.parse(JSON.stringify(obj));
        Object.defineProperty(obj, 'name', {
            get() {
                return newObj.name;
            },
            set(val) {
                if(val === newObj.name) return;
                newObj.name = val;
                observer();
            }
        });
        function observer() {
            text.innerHTML = obj.name;
            input.value = obj.name;
        }
        // 定时器显示数据
        setTimeout(() => {
            obj.name = "Trist"
        }, 1000);
        // 监听input框改变数据
        input.oninput = function() {
            obj.name = this.value;
        }


        // 缺点：
        // 1. 需要对原始数据进行克隆
        // 2.需要分别给对象中每一个需要的属性设置监听
    </script>
</body>
</html>